import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form, Divider, Card, Steps, Button, message, Input, Select } from 'antd';

const FormItem = Form.Item;
const Option = Select.Option;

@connect(({ immanage, general, loading }) => ({
  immanage,
  general,
  loading: loading.models.immanage,
}))
@Form.create()
export default class Check extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'general/getworkerList',
    });
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        /*
          成功后调用表单清除
         */
        console.log('values', values);
        const { dispatch } = this.props;
        dispatch({
          type: 'immanage/checkAndAssign',
          payload: {
            id: this.props.immanage.workOrderInfo.id,
            netAccountInfo: values.netAccountInfo,
            workerId: values.workerId,
          },
          callback: () => {
            this.props.handleModal();
            this.props.form.resetFields();
          },
        });
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const workerArray = [];
    this.props.general.workerList.map((item) => {
      return (
        workerArray.push({ id: item.id, value: item.userName })
      );
    });
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };
    return (
      <Card bordered={false}>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayout}
            label="宽带账号信息"
          >
            {getFieldDecorator('netAccountInfo', {
              rules: [
                {
                  required: true, message: '请输入宽带账号信息',
                }],
            })(
              <Input.TextArea placeholder="请输入宽带账号信息" autosize={{ minRows: 4, maxRows: 6 }} />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="指派师傅"
          >
            {getFieldDecorator('workerId', {
              rules: [
                {
                  required: true, message: '请选择指派师傅',
                }],
            })(
              <Select placeholder="请选择">
                {
                  workerArray.map((item, index) => {
                    return (
                      <Option
                        key={index.toString()}
                        value={item.id}
                      >
                        {item.value}
                      </Option>
                    );
                  })
                }
              </Select>
            )}
          </FormItem>
          <FormItem {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit">审核并派单</Button>
          </FormItem>
        </Form>
      </Card>
    );
  }
}
